<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>乐鸟2021年新年晚会抽奖系统</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
</head>
<style>
    body {
        overflow: hidden;
        /*当内容溢出时，不显示*/
        /* background-image: url("image/流星雨.jpg"); */
    }

    .divv {
        position: absolute;
        top: 50px;
        left: 42%;
        width: 268px;
        height: 600px;
    }

    #num {
        text-align: center;
        color: white;
        font-size: 40px;
        position: absolute;
        top: 10px;
    }

    .button {
        text-align: center;
        position: relative;
        top: -75px;
        left: 40px;
    }
    #start{
        width: 150px;
        height: 40px;
        outline: none;
    }
    #start:hover{
        background:#00fff6;
        color: blue;
    }
    #img {
        width: 268px;
        height: 271px;
    }

    .numbe {
        width: 1000px;
        height: 800px;
        border: 1px solid #00fff6;
        margin-left: -300px;
        background: url('./1.jfif')round;
    }

    .users {
        width: 800px;
        height: 560px;
        margin-top: 150px;
        margin-left: 85px;
    }

    .users span {
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: inline-block;
        border: 2px solid lightpink;
        border-radius: 5px;
        margin: 10px 0 0 12px;
        font-size: 16px;
    }

    .users p {
        width: 90%;
        height: 100px;
        margin: 0 auto;
        text-align: center;
        line-height: 100px;
        font-size: 30px;
        border: 5px solid green;
        color: green;
        border-radius: 5px;
        font-weight: bold;
        margin-top: 50px;
    }
    #usernum{
        width: 300px;
        height: 30px;
        line-height: 30PX;
        position: absolute;
        font-size: 20px;
        top: 105px;
        left: -120px;
    }
    #canvas {}
</style>

<body>


    <div class="divv">
        <!-- <img class="img-thumbnail" alt="头像" id="img" src="image/yuan.jpg"> -->
        <div id="num"></div>
        <div class="numbe">
            <div class="users"></div>
        </div>
        <div id='usernum'>剩余人数  73</div>
        <div class="button">
            <button id="start" class="btn btn-success">开始</button>
            <!-- <button id="stop" class="btn btn-info">结束</button> -->
        </div>
    </div>



    <!--
            <canvas>画布 画板 画画的本子
        -->
    <canvas width=400 height=400 style="background: #000000;" id="canvas"></canvas>

    <!--
            javascript 画笔
        -->







</body>

<script type="text/javascript">
    var num = document.getElementById("num");
    var img = document.getElementById("img");
    var start = document.getElementById("start");
    var usernames = document.getElementsByClassName('users')[0];
    var usernumt = document.getElementById('usernum')
    // var stop = document.getElementById("stop");
    // var image = ["image/XX.jpg", "image/zXXn.jpg",
    //     "image/XX.jpg", "image/XX.jpg", "image/XX.jpg",
    //     "image/XX.jpg"
    // ];
    var arr = ["林龙",
        "张丹",
        "徐利英",
        "李轩",
        "韩光",
        "闫爽",
        "杨书平",
        "郝绍伟",
        "白涛",
        "郑南",
        "刘俊亚",
        "张学森",
        "姜永鹏",
        "张学贵",
        "夏春刚",
        "梁建辉",
        "李海军",
        "田存亮",
        "樊瑞鹏",
        "崔梅晓",
        "包克磊",
        "杨志文",
        "陈贺",
        "胡泽雨",
        "闫庆港",
        "陆凯华",
        "田一波",
        "彭云川",
        "侯亚楠",
        "宋文建",
        "张彦伟",
        "刘阳",
        "白锦鹏",
        "李天帅",
        "王少飞",
        "于晓龙",
        "万亚辉",
        "乌兰宝音",
        "张占岭",
        "马雪莹",
        "魏文",
        "宋振海",
        "张燕",
        "刘保涛",
        "胡婷婷",
        "杨进财",
        "赵鹏飞",
        "杨文韬",
        "郭乐",
        "王进",
        "蒙雨泽",
        "韦盛昌",
        "关业松",
        "叶文海",
        "陈国柱",
        "石陶",
        "殷日龙",
        "王艺成",
        "高权威",
        "蔡志武",
        "李润生",
        "殷玉龙",
        "林锋",
        "林艳",
        "林霞",
        "周强军",
        "杨清成",
        "罗树斌",
        "林辉",
        "杨周明",
        "陆家俊",
        "王方艳",
        "宁家龙"
    ];
    var intv = null;
    let username = '';
    let userName = [];
    let intvone = null;
    let length = 0;
    let time = null;
    start.onclick = function sum() {
        usernumt.innerText = '剩余人数'+'     '+arr.length.toString();   
        if (userName.length==15 && usernames.children.length==15) {
            userName = [];
            
            for (let q = 0; q < usernames.children.length; q++) {
                console.log(q);
                usernames.removeChild(usernames.children[q])
                q--;
            }
            
        }
        if (userName.length == 0 && usernames.children.length == 0) {
            if (arr.length < 15) {
                for (let e = 0; e < arr.length; e++) {
                    let span = document.createElement('span');
                    span.innerText = arr[e];
                    usernames.append(span)
                }       
                console.log(arr.length); 
                arr = [];    
                usernumt.innerText = '剩余人数'+'     '+arr.length.toString();   
               
                if (arr.length == 0) {
                        let p = document.createElement('p');
                        p.innerText = '本次抽奖完毕';
                        usernames.append(p)
                    }
            }else{
                stop();
            }
           
        } 
    }

    function stop() {
        if (intv == undefined) {

            intv = setInterval(function () {
                var random = Math.floor(Math.random() * arr.length);
                num.innerHTML = arr[random];
                username = arr[random];
                // img.src = image[random];
                clearInterval(time);
                time = null;
            }, 0);

            intvone = setTimeout(function () {
                clearInterval(intv);
                intv = null;
                if (userName.length < 15 && intv == null) {
                    userName[userName.length] = username;
                    let span = document.createElement('span');
                    span.innerText = userName[userName.length - 1];
                    usernames.append(span)
                    if (userName.length) {
                        for (let i = 0; i < userName.length; i++) {

                            for (var j = 0; j < arr.length; j++) {
                                if (userName[i] == arr[j]) {
                                    arr.splice(j, 1)
                                }
                            }
                        }
                    }
                    usernumt.innerText = '剩余人数'+'     '+arr.length.toString();
                    console.log(userName)
                    console.log(arr.length)
                    setTimeout(function () {
                        if (userName.length != 15) {
                            stop();
                        }

                    }, 1000)

                }
            }, 1000)


        }
    }


    /* 下面是流星雨代码 */

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var s = window.screen;
    var w = s.width;
    var h = s.height;
    canvas.width = w;
    canvas.height = h;
    var fontSize = 14;
    var clos = Math.floor(w / fontSize);
    var drops = [];
    var str = "qwertyuiopasdfghjklzxcvbnm";
    for (var i = 0; i < clos; i++) {
        drops.push(0);
    }

    function drawString() {
        ctx.fillStyle = "rgba(0,0,0,0.05)"
        ctx.fillRect(0, 0, w, h);
        ctx.font = "600 " + fontSize + "px 微软雅黑";
        ctx.fillStyle = "#00ff00";
        for (var i = 0; i < clos; i++) {
            var x = i * fontSize;
            var y = drops[i] * fontSize;
            ctx.fillText(str[Math.floor(Math.random() * str.length)], x, y);
            if (y > h && Math.random() > 0.99) {
                drops[i] = 0;
            }
            drops[i]++;
        }

    }
    setInterval(drawString, 30);
</script>

</html>t>

</html>